<template>
  <div>
    <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" class="demo-form-inline" label-width="100px"
      label-position="right" :rules="rules">
      <el-row justify="center">
        <el-col :span="22" :offset="0">
          <el-form-item label="当前科目：">
            <el-input v-model="ruleForm.subject" readonly />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col :span="22" :offset="0">
          <el-form-item label="当前进度：" prop="subjectState">
            <el-select v-model="ruleForm.subjectState" placeholder="请选择当前进度" clearable>
              <el-option v-for="item in subjectstats" :label="item.subject" :value="item.subject" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col :span="22" :offset="0">
          <el-form-item label="备注：" prop="comment">
            <el-input v-model="ruleForm.comment" placeholder="" clearable />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row justify="end">
        <el-col :span="6" :offset="0">
          <el-form-item>
            <el-button type="warning" @click="submitForm(ruleFormRef)">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
  
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { stuExamBatchPut, subjectGet } from "../../../api/student"
import { examType } from '../../../types/examType'
import { getSubjectName } from "../../../utils/schoolName"

interface Props {
  selArr: Array<string>,
  tableData: examType[],
  currentsubject: string
}

let props = defineProps<Props>()
const ruleForm = reactive({
  subject: "",
  subjectState: "",
  comment: '',
  state:'',
  completeTime:''
})
ruleForm.subject = props.currentsubject

//首屏渲染表单数据
//通过value获取key,得到当前科目的id
let subjectObj: any = await getSubjectName()
let cSubjectId = Object.keys(subjectObj).find(key => subjectObj[key] == props.currentsubject)
//通过id获取当前科目进度
let subjectstats = ref<{
  correlation: string;
  objectId: string;
  parentId: string;
  subject: string;
}[]>([])
let res = await subjectGet(cSubjectId!)
subjectstats.value = res.data.results
console.log(subjectstats.value);
//实现子父通信
const emit = defineEmits(['getNewTableDate'])
let ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  subjectState: [
    { required: true, message: '请选择当前进度' },
  ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      props.tableData.forEach((item) => {
        if (props.selArr.includes(item.objectId)) {
          if (ruleForm.subjectState) {
            item.subjectState = ruleForm.subjectState
          }
          if (ruleForm.comment) {
            item.comment = ruleForm.comment
          }
        }
      })
      emit("getNewTableDate",props.tableData)
      stuExamBatchPut(props.selArr, ruleForm).then(() => {
        console.log("修改成功");
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>
  
<style scoped></style>